<template>
	<view class="container">
		<!-- 分段器 -->
		<view class="menu">
			<uni-segmented-control 
				:current="current" 
				:values="classifyValue" 
				@clickItem="onClickItem" 
				styleType="button" 
				activeColor="#4cd964"
			>
			</uni-segmented-control>
		</view>
		
		<view class="layout">
			<view class="box" v-for="(item, index) in pets" :key="item._id">
				<!-- 图片，宽度撑满，高度自动延申 -->
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<!-- 文字 -->
				<view class="text">
					{{ item.content }}
				</view>
			</view>
		</view>
	
		<!-- 加载区域 -->
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refresh" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { onReady, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';  

// 宠物列表
const pets = ref([])
// 当前选中分段器下标
const current = ref(0)
// 分段器内容
const classify = [
	{key: 'all', value: '全部'},
	{key: 'dog', value: '狗狗'},
	{key: 'cat', value: '猫猫'},
]
// 计算属性：只显示分段其内容中的value属性
const classifyValue = computed(() => {
	return classify.map((item) => {
		return item.value
	})
})

// 分段器点击事件
function onClickItem(e) {
	// e中包含currentIndex: 0,1,2
	console.log(e)
	current.value = e.currentIndex
	pets.value = []
	network()
}

// 图片预览
function onPreview(index) {
	// 取出图片数组中的url
	let urls = pets.value.map((item) => {
		return item.url
	})
	
	uni.previewImage({
		current: index, // 当前图片下标
		urls: urls // 传入图片url数组
	})
}

// 获取宠物列表
async function network() {
	try {
		// 显示加载框
		uni.showLoading()
		
		let res = await uni.request({
			// url: "https://tea.qingnian8.com/tools/petShow?size=10"
			url: "https://tea.qingnian8.com/tools/petShow",
			data: {
				size: 5,
				type: classify[current.value].key
			},
			method:'GET',
			header: {
				"access-key": "suibian999"
			}
		})
		console.log(res.data)
		
		// 添加接口请求结果判断
		if (res.data.errCode == 0) {
			// pets.value = res.data.data
			// 配合触底加载更多
			pets.value = [
				...pets.value, 
				...res.data.data // 这里res.data.data也是数组对象[{}]，需要展开
			]
		} else if (res.data.errCode == 400) {
			uni.showToast({
				title: res.data.errMsg,
				icon: "none",
				duration: 2000
			})
		}
		
	} catch(e) {
		uni.showToast({
			title: "网络请求有误",
			icon: "none",
		})
	} finally {
		// 隐藏加载框
		uni.hideLoading()
		// 结束下拉刷新动画
		uni.stopPullDownRefresh()
	}
}

// 手动刷新
function onRefresh() {
	// 开启刷新（主动触发一次下拉刷新）
	uni.startPullDownRefresh()
}

// 返回顶部
function onTop() {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	})
}

onReady(() => {
	network()
})

// 触底加载更多
onReachBottom(() => {
	network()
})

// 下拉刷新
onPullDownRefresh(() => {
	// 先清空原数组
	pets.value = []
	// 开始加载
	network()
	// 结束下拉刷新动画(放到请求中的finally中去！)
	// uni.stopPullDownRefresh()
})
</script>

<style scoped lang="scss">
.container{
	.layout{
		padding: 50rpx;
		
		.box{
			margin-bottom: 60rpx;
			box-shadow: 0rpx 10rpx 40rpx rgba(0, 0, 0, 0.08);
			border-radius: 30rpx;
			overflow: hidden;
			
			.pic{
				
				// 这里我们想让图片宽度默认占一行，高度自动延申
				image{
					width: 100%;
				}
				
			}
			.text{
				padding: 30rpx;
			}
		}
	}
	
	.loadMore{
		// 底部安全区域css环境变量
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
	}
	
	.float{
		position: fixed;
		right: 30rpx;
		bottom: 80rpx;
		// 底部安全区域css环境变量
		padding-bottom: env(safe-area-inset-bottom);
		.item{
			width: 90rpx;
			height: 90rpx;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 50%;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 90rpx;
			border: 1px solid #eee;
		}
	}
}
</style>
